<template>
  <div>
    <div class="area-header" style="margin-top:10px;">
      <span class="area-header-title">{{ $t('审批信息') }}</span>
    </div>
    <ul class="approvalRecord">
      <li class="colspan">
        <div class="content">
          <p v-for="(item,index) in recordList" v-show="index === 0" :key="index" class="tit">
            {{ $t('{0} 于 {1}启动流程', [item.startUser,item.startDate]) }}
            <span v-if="freeFlowAssigneesNickNameAll">  | 审批人:
              <span v-for="(item,index) in freeFlowAssigneesNickNameAll" :key="index">
                {{ index !== 0 ? ' > ' + item : item }}
              </span>
            </span>
          </p>
        </div>
      </li>
      <li v-for="(item,index) in recordList" v-show="index>0" :key="index">
        <template v-if="item.submitType === 'stop'">
          <span style="font-size: 13px;line-height: 20px;padding: 10px;">
            {{ $t('{0} 于 {1}终止流程', [item.stopUser,item.stopDate]) }}
            <br>
            {{ $t('终止原因') }}：{{ item.stopReason }}
          </span>
        </template>
        <template v-else>
          <div class="user center"><i v-html="item.taskName" /></div>
          <div class="user center" style="padding:10px;">
            <i v-for="(approver) in item.approver" :key="approver">
              {{ approver }}
            </i>
            <span v-if="item.entrustUser" class="entrustUser" :title="item.entrustUser"> <i>{{ $t('委托人') }}: </i> {{ item.entrustUser }}</span>
          </div>
          <div class="content">
            <p v-if="item.submitType === 'adjustNode'" class="tit contentTit">{{ $t('{0} 将流程调整至 {1}', [item.adjustNodeUser,item.adjustNode]) }}</p>
            <p v-for="(comment,inex) in item.commentList" v-else :key="inex" class="tit contentTit" style="white-space:pre-wrap">{{ comment.message }}</p>
            <p v-if="item.ccUser !== '' && item.ccUser !== null" class="tit contentTit">{{ $t('抄送用户') }}:{{ item.ccUser }}</p>
            <p class="test">
              <span v-for="att of item.taskAttachments" :key="att.id">
                <a class="link_a" :title="$t('点击预览，右键下载')" @click="onlinePreview(att)" @contextmenu.prevent="down(att)">{{ att.name }}</a>
              </span>
            </p>
            <p class="test">
              <span v-if="item.startTime">
                <i class="startTime" />
                {{ parseTime(item.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              <i v-if="item.endTime">-</i>
              <span v-if="item.endTime">
                <i class="endTime" />
                {{ parseTime(item.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </p>
          </div>
        </template>
      </li>

    </ul>

    <!-- 预览附件 -->
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>

<script>
  import { approvalRecord } from '@/api/act/process/actProcess'
  import { downLoadFileOpen } from '@/utils/zipdownload'
  export default {
    name: 'ApprovalRecord',
    props: {
      // 流程实例ID
      actId: {
        type: String,
        required: false,
        default: undefined
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        recordList: [],
        // 自由流选择的审批人集合
        freeFlowAssigneesNickNameAll: [],
        previewTit: undefined,
        taskName: []
      }
    },
    watch: {
      actId: {
        handler() {
          if (this.actId !== undefined && this.list.length === 0) {
            const queryData = {}
            queryData.actId = this.actId
            approvalRecord(queryData).then(response => {
              this.recordList = response.data
              this.freeFlowAssigneesNickNameAll = response.datas.freeFlowAssigneesNickNameAll
              this.formatApproval(this.recordList)
              this.$nextTick(() => {
                this.$emit('update:recordList', this.recordList)
              })
            })
          }
        },
        deep: true,
        immediate: true
      },
      list: {
        handler(val) {
          if (val.length > 0) {
            this.recordList = val
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      // if (this.actId !== undefined && this.list.length === 0) {
      //   const queryData = {}
      //   queryData.actId = this.actId
      //   approvalRecord(queryData).then(response => {
      //     this.recordList = response.data
      //     this.formatApproval(this.recordList)
      //   })
      // }
    },
    mounted() {
    },
    methods: {
      // 预览附件
      onlinePreview(row) {
        this.$refs.OnlinePreview.onlinePreviewFile(row.id)
      },
      down(row) {
        downLoadFileOpen(row.id)
      },
      formatApproval(recordList) {
        for (let i = 0; i < recordList.length; i++) {
          var commentList = recordList[i].commentList
          if (commentList != null) {
            for (let j = 0; j < commentList.length; j++) {
              if (commentList[j].message.indexOf('\n') !== -1) {
                commentList[j].message = commentList[j].message.replace('审批意见:', '审批意见:\n')
              }
            }
          }
        }
      }

    }
  }
</script>
<style lang="scss" scoped>

.entrustUser{
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  i{
    color: #9a9a9a;
    display: inline!important;
  }
}
</style>
